<template>
  <view class="container">
    <swiper
      class="swiper-top"
      :indicator-dots="indicatorDots"
      :autoplay="autoplay"
      indicator-color="#FFF5D5"
      indicator-active-color="#FCC309"
      :interval="interval"
      :duration="duration"
      circular="true"
    >
      <swiper-item v-for="(item, index) in imgList" v-if="item" :key="index"
        ><image class="head-img" :src="item"></image
      ></swiper-item>
    </swiper>
    <view class="product-info-container">
      <view class="product-info-card">
        <view class="product-name">{{ goodsInfo.name }}</view>
        <view class="product-item">
          <view class="title">价格</view>
          <view class="content">
            <text class="product-price">
              <text class="unit">¥</text>
              {{ goodsInfo.price }}
            </text>
            <text class="product-orginal-price">{{
              goodsInfo.orginalPrice | formatMoneyRmbUnit
            }}</text>
          </view>
        </view>
        <view class="product-item">
          <view class="title">编号</view>
          <view class="content">{{ goodsInfo.productNo }}</view>
        </view>
        <view class="product-item" style="margin-bottom: unset">
          <view class="title">数量</view>
          <view class="content">
            <view class="add-car">
              <view class="sub-icon" @click="addGoods(0)">-</view>
              <input
                maxlength="3"
                type="number"
                v-model="Count"
                class="add-input"
                @input="onNumberChange"
                min="0"
              />
              <view class="add-icon" @click="addGoods(1)">+</view>
            </view>
          </view>
        </view>
      </view>
      <view
        class="header-buy bottom-change-view"
        @click="$noMultipleClicks(addToCart)"
        >加入购物车</view
      >
    </view>
	<view style="padding:10rpx 32rpx">
    <view class="product-detail">
      —————
      <text class="product-detail-title">商品详情</text>
      —————
    </view>
    <view class="context-detail" v-html="goodsInfo.desc"></view>
    <view class="cart-view-container bottom-change-view" @click="clickToCart">
      <image
        class="cart-view-container-icon"
        src="../../../static/images/shopcart.png"
      ></image>
      <text class="cart-view-container-text">{{ productNum }}</text>
    </view>
	</view>
  </view>
</template>

<script>
	var graceRichText = require("@/config/richText.js");
import {
  isLogin,
  toLogin,
  successToShow,
  errorToShow,
  showShareMenu,
} from "@/config/common.js";
import { getMallProductById } from "@/constant/mall.js";
import { getCartNum, addCart } from "@/constant/cart.js";
export default {
  data() {
    return {
      productId: "",
      Count: 1,
      indicatorDots: true,
      autoplay: true,
      interval: 3000,
      duration: 500,
      goodsInfo: {},
      stationList: ["1", "2"],
      station: "1",
      customerId: uni.getStorageSync("customerId"),
      productNum: 0,
      noClick: true,
      realPrice: 0,
	  imgList:[]
    };
  },
  onShow() {
    this.getCartNum();
  },
  onLoad(option) {
	  console.log(isLogin())
    if (isLogin()) {
      if (option.productId) {
        this.productId = option.productId;
        this.getProductInfo();
      }
    } else {
      toLogin();
    }
    showShareMenu();
  },
  methods: {
    countPrice() {
      this.realPrice = this.Count * this.goodsInfo.Price;
    },
    clickToCart() {
		console.log("222")
      uni.navigateTo({
        url: "../cart/index",
      });
    },
    addGoods(val) {
      if (val == 0) {
        if (this.Count == 0) {
          return;
        }
        this.Count--;
      } else {
        this.Count++;
      }
      this.countPrice();
    },
    async getCartNum() {
      let result = await getCartNum({
        customerId: this.customerId,
      });
      this.productNum = result.data.total;
    },
    bindStationChange(e) {
      this.station = e.target.value;
    },
    onNumberChange(e) {
      this.Count = e.target.value;
      this.countPrice();
    },
    async getProductInfo() {
      let result = await getMallProductById(this.productId);
      this.goodsInfo = result.data;
	  let imgArr=result.data.imgList
	   console.log(result.data.imgList,'result.data.imglist')
	  this.imgList=[]
	  imgArr.forEach((item)=>{
		  if(item){
			    let arr=item.split('?')
				  this.imgList.push(arr[0])
		  }
		
	  })
	  console.log(this.imgList,'this.imgList')
	 
	  console.log(this.goodsInfo,'this.goodsInfo')
      this.countPrice();
      this.goodsInfo.desc = this.goodsInfo.desc.replace(
        /style=""/gi,
        'style="max-width:100%;" '
      );
      this.goodsInfo.desc = this.goodsInfo.desc.replace(
        /\<img/gi,
        '<img style="max-width:100%;" '
      );
	  
	  
	  this.goodsInfo.desct = graceRichText.format(this.goodsInfo.desc)
    },
    async addToCart() {
      if (this.Count && this.Count > 0) {
		  
        let result=await addCart({
          amount: this.Count,
          goodsId: this.productId,
		  goodsType:2,
		  storeId:0,
		  tableNumber:'',
          // userid: this.customerId,
        });
		if(result.code==0){
			successToShow("添加成功", (res) => {
			  this.getCartNum();
			});
		}
       
      }
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  background-color: $main-page-color;
  height: 100vh;
}

.swiper-top {
  height: 440rpx;
  margin-bottom: 20rpx;
}

.head-img {
  width: 100vw;
}

.product-info-container {
  padding: 0 30rpx;
  margin-bottom: 36rpx;
  font-family: "SourceHanSansCN-Regular";
}
.product-info-card {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx;
  color: $main-text-color-gray-33;
  font-size: $main-text-size-32;
  .product-name {
    font-family: "SourceHanSansCN-Medium";
    margin-bottom: 40rpx;
  }
  .product-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50rpx;
    font-family: "SourceHanSansCN-Regular";
  }
}
.product-price {
  color: $main-text-color-main-orange;
  margin-right: 10rpx;
  .unit {
    font-size: $main-text-size-24;
  }
}

.product-orginal-price {
  font-size: $main-text-size-24;
  color: $main-text-color-grey;
  text-decoration: line-through;
}
.header-buy {
  height: 76rpx;
  line-height: 76rpx;
  text-align: center;
  color: #ffffff;
  font-size: $main-text-size-32;
  color: #fff;
  margin-top: 36rpx;
  border-radius: 80rpx;
}

.add-car {
  display: flex;
  align-items: center;
  border: 2rpx solid $main-line-color-gray;
  .sub-icon {
    width: 50rpx;
    text-align: center;
    height: 100%;
    line-height: 56rpx;
    border-right: 2rpx solid $main-line-color-gray;
  }

  .add-icon {
    width: 50rpx;
    text-align: center;
    height: 100%;
    line-height: 56rpx;
    border-left: 2rpx solid $main-line-color-gray;
  }

  .add-input {
    width: 78rpx;
    text-align: center;
  }
}

.cart-view-container {
  position: fixed;
  bottom: 114rpx;
  right: 30rpx;
  width: 96rpx;
  height: 96rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  // background-color: #fff;
  &-icon {
    width: 56rpx;
    height: 56rpx;
  }

  &-text {
    color: #fff;
    position: absolute;
    top: 6rpx;
    right: 10rpx;
    background-color: #ff0000;
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
  }
}

.product-detail {
  margin-bottom: 36rpx;
  color: #e0e0e0;
  text-align: center;

  &-title {
    margin-left: 24rpx;
    margin-right: 24rpx;
    color: #5e5e5e;
    font-size: $main-text-size-24;
  }
}

.context-detail {
  padding-bottom: 40rpx;
}
</style>
